'use client';

import Link from 'next/link';
import { useSelectedLayoutSegment } from 'next/navigation';

type Props = {
	memberSID: string;
};

export default function UserProfileTabs({ memberSID }: Props) {
	const segment = useSelectedLayoutSegment();

	const tabs = [
		{ key: null, label: '게시글', href: `/user/${memberSID}` },
		{ key: 'comments', label: '댓글', href: `/user/${memberSID}/comments` },
		{ key: 'feed', label: '피드', href: `/user/${memberSID}/feed` },
		{ key: 'paper', label: '모의투자 성적', href: `/user/${memberSID}/paper` },
		{ key: 'track-record', label: '예측 적중률', href: `/user/${memberSID}/track-record` }
	];

	return (
		<nav className="user-profile__tabs" aria-label="프로필 탭">
			{tabs.map((tab) => {
				const active = segment === tab.key;
				return (
					<Link
						key={tab.label}
						href={tab.href}
						className={`user-profile__tab${active ? ' user-profile__tab--active' : ''}`}
						aria-current={active ? 'page' : undefined}
					>
						{tab.label}
					</Link>
				);
			})}
		</nav>
	);
}